<template>
	<div :id="model.id" class="image-text warp" 
		:class="[`terminal${terminal}`,`pos-${model.data.positionValue}`]"
		:style="{height: `${model.data.height}px`}">
		<div class="img img-left">
			<a class="a-link" @click="jumpLink(model.data.linkObj)">
				<el-image :src="model.data.imageUrl" fit="contain" :style="{height: `${model.data.height}px`}"></el-image>
			</a>
		</div>
		<div class="text" v-if="model.data.content && model.data.content != '<p><br></p>'">
			<div v-html="model.data.content"></div>
		</div>
		<div class="img img-right">
			<a class="item a-link" @click="jumpLink(model.data.linkObj)">
				<el-image :src="model.data.imageUrl" fit="contain" :style="{height: `${model.data.height}px`}"></el-image>
			</a>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive } from 'vue';
	export default {
		name: 'image-text-basics',
		props: {
			terminal: {
				type: Number,
				default: 1
			},
			model: {
				type: Object
			}
		},
		setup(props) {
			const state = reactive({
				terminal: props.terminal,
				model: props.model,
			});
			
			return {
				...toRefs(state),
			};
		}
	}
</script>

<style lang="scss" scoped>
	.image-text {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.img {
			position: relative;
			background-color: transparent;
			
			.el-image{
				display: flex;
			}
		}

		.text {
			width: 50%;
		}

		&.pos-top {
			display: block;
			text-align: center;
			
			.text {
				width: 100%;
			}

			.img-right {
				display: none;
			}
		}

		&.pos-bottom {
			display: block;
			text-align: center;
			
			.text {
				width: 100%;
			}

			.img-left {
				display: none;
			}
		}

		&.pos-left {
			.img-right {
				display: none;
			}
			.text {
				padding-left: 10px;
			}
		}

		&.pos-right {
			.img-left {
				display: none;
			}
			.text {
				padding-right: 10px;
			}
		}
	}
</style>
